<template>
  <a-modal
      title="添加押金"
      :width="650"
      :visible="yjvisible"
      :confirmLoading="yjconfirmLoading"
      @cancel="yjhandleCancel"
      @ok="handleSubmit"
    >
      <a-table
        :columns="columnsYjDio"
        :data-source="loadDataYjDio"
        :rowKey="(record) => record.key"
        :row-selection="rowSelection"
        :pagination='false'>
        <span slot="deposittype" slot-scope="text">
            {{ deposittypeFilter(text) }}
        </span>
      </a-table>
    </a-modal>
</template>
<script>
  import { busCostBillDepositList } from '@/api/modular/main/buscostbilldeposit/busCostBillDepositManage'
  export default {
    data() {
      return {
        // 已保存的押金
        yjData: [],
        deposittypeDictTypeDropDown: [ { value: '金額', code: '0' }, { value: '計數', code: '1' } ],
        // 彈出框押金列表
        loadDataYjDio: [],
        // 已選擇的押金-未保存 -key
        selectedRowKeysYjDio: [],
        selectedRowsYjDio: [],
        columnsYjDio: [
          {
            title: '費用項',
            dataIndex: 'depositname'
          },
          {
            title: '收費方式',
            dataIndex: 'deposittype',
            scopedSlots: { customRender: 'deposittype' }
          }
        ],
        yjvisible: false,
        yjconfirmLoading: false
      }
    },
    computed: {
      rowSelection() {
        return {
          onChange: this.onSelectChangeYjDio,
          selectedRowKeys: this.selectedRowKeysYjDio,
          getCheckboxProps: record => ({
            props: {
              disabled: record.disabled,
              name: record.name
            }
          })
        }
      }
    },
    created() {
    },
    methods: {
       deposittypeFilter (text) {
        // eslint-disable-next-line eqeqeq
        const values = this.deposittypeDictTypeDropDown.filter(item => item.code == text)
        if (values.length > 0) {
          return values[0].value
        }
      },
      add (yjData) {
        this.yjData = yjData
        this.yjvisible = true
        busCostBillDepositList().then((res) => {
            const reldata = []
            if (res.code === 200) {
              if (res.data.length > 0) {
                for (var i = 0; i < res.data.length; i++) {
                  var zt = false
                  for (var imAdd = 0; imAdd < this.yjData.length; imAdd++) {
                      if (res.data[i].id === this.yjData[imAdd].key + '') {
                        zt = true
                        break
                      }
                  }
                  reldata.push({ key: res.data[i].id + '', disabled: zt, depositname: res.data[i].depositName, depositid: res.data[i].id, deposittype: res.data[i].count, amount: 0.00, quantity: 0 })
                }
                this.loadDataYjDio = reldata
              }
            } else {
              this.$message.error(res.msg)
            }
          })
      },
      onSelectChangeYjDio (selectedRowKeys, selectedRows) {
        this.selectedRowKeysYjDio = selectedRowKeys
        this.selectedRowsYjDio = selectedRows
      },
      handleSubmit () {
        this.$emit('ok', this.selectedRowsYjDio)
        this.yjhandleCancel()
      },
      yjhandleCancel () {
        this.selectedRowsYjDio = []
        this.selectedRowKeysYjDio = []
        this.yjvisible = false
        this.yjData = []
      }
    }
}
</script>
<style lang="less">
</style>
